---
title: React Tooltip - Flowbite
description: Use the tooltip component to show a descriptive text when hovering over an element such as a button and customize the content and style with React and Tailwind CSS
---

Use the tooltip component from Flowbite React to indicate helpful information when hovering over an element such as a button or link to improve the UI/UX of your website.

Choose from multiple options, layouts, styles, colors, and animations from the examples below and customize the content and options using the custom React API props and the utility classes from Tailwind CSS.

Before using the tooltip component, make sure to import the component in your React project:

```jsx
import { Tooltip } from "flowbite-react";
```

## Default tooltip

Wrap the trigger component with the `<Tooltip>` component and pass the tooltip content to the `content` prop of the `<Tooltip>` component.

This will render the tooltip whenever you hover over the trigger component.

<Example name="tooltip.root" />

## Tooltip styles

Use the `style` prop to change the style of the tooltip. The default style is `light` and you can also use `dark`.

<Example name="tooltip.styles" />

## Placement

Update the placement of the tooltip using the `placement` prop. The default placement is `top` and you can also use `right`, `bottom`, and `left`.

<Example name="tooltip.placement" />

## Trigger type

Use the `trigger` prop to change the trigger type of the tooltip if you want to show the tooltip when clicking on the trigger element instead of hovering over it.

The default trigger type is `hover` and you can also use `click`.

<Example name="tooltip.trigger" />

## Animation

Update the default animation of the tooltip component by using the `animation` prop. The default animation is `duration-300` and you can also use `duration-150`, `duration-500`, and `duration-1000`.

<Example name="tooltip.animation" />

## Disable arrow

You can disable the arrow of the tooltip component by passing the `arrow` prop with a value of `false`.

<Example name="tooltip.disableArrow" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="tooltip" />

## References

- [Flowbite Tooltip](https://flowbite.com/docs/components/tooltips/)
